<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8" />
    <title>Guess Card</title>
    <link
      rel="shortcut icon"
      href="{{ url_for('static', filename='favicon.ico') }}"
    />

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/js/jquery.cookie.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="../static/js/MessageBox.js"></script>

    <style>
      * {
        margin: 0; /* 消除边界*/
        padding: 0;
      }
      ::-webkit-scrollbar {
        display: none;
      }
      .modal {
        z-index: 99999999;
        padding-right: 0px;
        position: absolute;
        top: 30%;
        margin-top: -7.5rem;
        background: #fff;
        width: 30rem;
        height: 12rem;
        font-size: 1.6rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        left: 50%;
        margin-left: -15rem;
        padding: 0.5rem;
        border-radius: 0.5rem;
      }
      .modal button {
        margin-right: 0.5rem;
        height: 2rem;
        line-height: 2rem;
        font-size: 1.6rem;
      }
      .modal-dialog {
        width: 100%;
      }
      .modal-footer {
        text-align: center;
      }
      .modal-header {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        justify-content: space-between;
        height: 3.2rem;
      }
      body {
      }
      .bg {
        position: relative;
        height: 100vh;
        width: 100%;
        background-image: url(../static/mobile-bg.jpg);
        background-size: cover;
        overflow-y: scroll;
      }
      .header {
        height: 34.2rem;
        width: calc(100% - 2.4rem);
        background: linear-gradient(
          180deg,
          #25100d 0%,
          rgba(11, 15, 19, 0) 100%
        );
        color: #fff;
        padding: 1.4rem 1.2rem;
      }
      .header-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 3rem;
      }
      .header-nav-box {
        display: flex;
        align-items: center;
      }
      .header-icon {
        width: 1.4rem;
        height: 1.4rem;
        margin-right: 0.5rem;
      }
      .game_box_main {
        background-image: url(../static/game_box_main_bg.png);
        background-size: cover;
        width: 36.4rem;
        height: 36.4rem;
        padding: 0.3rem 0.3rem;
        border-radius: 0.8rem;
      }
      .game_box_nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .game_box_nav_item {
        display: flex;
        align-items: center;
      }
      .game_box_nav_item .value {
        font-weight: 600;
        font-size: 2.16rem;
        color: #ffffff;
        line-height: 3rem;
      }
      .game_box_nav_item .label {
        font-weight: 300;
        font-size: 1.5rem;
        color: #ffffff;
      }

      .game_box_nav_item .decorate {
        width: 0.36rem;
        height: 1.33rem;
        background: #ffed75;
        border-radius: 0.18rem;
        margin-right: 0.6rem;
      }

      .bg:before {
        width: 100%;
        height: 100%;
        background-image: url(../static/bg.jpg);
        background-size: 100% 100%;
        background-attachment: fixed; /*将图片固定*/
        position: absolute; /*图片定位*/
        top: 0;
        left: 0;
        content: "";
        z-index: -1; /*设置该标签等级，让其始终位于最上层*/
        -webkit-filter: opacity(
          70%
        ); /*设置透明度   blur还可以改变照片的模糊度*/
        filter: opacity(70%);
      }
      .content {
        height: 100vh;
      }
      .img-box {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
        margin: 0;
      }
      .game_box_operation {
        width: calc(100% - 4.6rem);
        height: 36rem;
        background: linear-gradient(
          180deg,
          #3a0c0c 0%,
          rgba(0, 43, 142, 0.31) 57%,
          #326ffa 100%
        );
        box-shadow: inset 0rem 1.2rem 1.9rem 0rem rgba(221, 153, 121, 0.52);
        border-radius: 0.96rem;
        padding: 2.3rem;
      }
      .cart-name-label {
        font-weight: 600;
        font-size: 24px;
        color: #ffffff;
        line-height: 33px;
        text-align: left;
        margin-bottom: 12px;
      }
      .input-answer-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
      #cardNameInput {
        width: 19.7rem;
        height: 4.8rem;
        font-size: 1.9rem;
        background: #f6f6f6;
        box-shadow: inset 0px 4px 6px 0px rgba(91, 50, 50, 0.5);
        border-radius: 12px;
        margin-bottom: 12px;
      }
      #submitBtn {
        width: 9.5rem;
        background: linear-gradient(90deg, #ffb712 0%, #ff7612 100%);
        border-radius: 0.96rem;
        height: 4.81rem;
        background-size: cover;
        cursor: pointer;
        text-align: center;
        line-height: 4.81rem;
        font-size: 1.8rem;
      }
      .tips-operation {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 41px;
        align-items: center;
        margin-bottom: 18px;
      }
      .tips-operation-btn {
        width: 12.28rem;
        height: 3.29rem;
      }
      .get_tips {
        background-image: url(../static/get_tips.png);
        background-size: cover;
        cursor: pointer;
      }
      .show_answer {
        background-image: url(../static/show_answer.png);
        background-size: cover;
        cursor: pointer;
      }
      .tips-box {
        height: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url(../static/tips_box_bg.png);
        background-size: cover;
        cursor: pointer;
        margin-bottom: 19px;
      }
      .tips-text {
        width: 210px;
        height: 46px;
        background-image: url(../static/tips_text.png);
        background-size: cover;
        cursor: pointer;
      }
      #tipInfo {
        width: 100%;
        display: none;
        margin-bottom: 19px;
        height: 140px;
        background: transparent;
        border-radius: 12px;
        border: 1px solid #ad716e;
        padding: 20px;
        flex-direction: column;
        justify-content: flex-start;
        background: rgba(216, 216, 216, 0.2);
      }
      #tipInfo .tips-item {
        display: flex;
        align-items: center;
      }
      #tipInfo .tips-item span {
        font-size: 16px;
        color: #ffffff;
        font-weight: 400;
      }
      #tipInfo .tips-item {
        font-weight: 600;
        font-size: 16px;
        color: #ffffff;
        margin-bottom: 8px;
      }
      #tipInfo .tips-item img {
        width: 19px;
        height: 22px;
      }
      #nextBtn {
        height: 94px;
        background-image: url(../static/next-button-bg.png);
        background-size: cover;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 26px;
        color: #032e50;
      }
      .nextBtn-text {
        margin-right: 15px;
      }
      .rank-box {
        width: 420px;
        height: 725px;
        padding: 30px 18px;
        border-radius: 28px;
      }
      .play-rank-text-box {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 14px;
        height: 57px;
      }
      .play-rank-text {
        font-weight: 600;
        font-size: 32px;
        color: #ffe0ab;
        line-height: 45px;
        margin: 0 8px;
      }
      .play-rank-text-left {
        text-align: right;
      }
      .play-rank-text-right {
        text-align: left;
      }
      .play-rank-text-1 {
        width: 45px;
        height: 6px;
        background: #ffed75;
        border-radius: 3px;
        margin-bottom: 8px;
      }
      .play-rank-text-2 {
        width: 21px;
        height: 6px;
        background: #ffed75;
        border-radius: 3px;
      }
      .header .img-part {
        width: 12rem;
        height: 12rem;
        padding: 0;
      }
      img[src=""],
      img:not([src]) {
        opacity: 0;
      }

      .font-20 {
        font-size: 20px;
      }
      .font-18 {
        font-size: 18px;
      }
      .font-16-bold {
        font-size: 16px;
        font-weight: bolder;
      }
      .rank-th-row {
        background: linear-gradient(
          rgba(255, 220, 76, 0.57) 0%,
          rgba(255, 128, 18, 0.06) 100%
        );
        height: 36px;
        color: #fff;
      }
      .rank-table-tr {
        height: 35px;
        font-size: 16px;
        color: #ffffff;
      }
      .rank-table-tr td div {
        width: 95.5px;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 20px 0;
      }
      .rank-table-tr-td1 {
        padding-left: 12px;
      }
      .rank-table-tr td .rank {
        width: 44px;
        height: 34px;
        text-align: center;
      }
      .rank-table-tr td .rank1 {
        width: 44px;
        height: 34px;
        background-image: url(../static/rank1.png);
        background-size: cover;
      }
      .rank-table-tr td .rank2 {
        width: 44px;
        height: 34px;
        background-image: url(../static/rank2.png);
        background-size: cover;
      }
      .rank-table-tr td .rank3 {
        width: 44px;
        height: 34px;
        background-image: url(../static/rank3.png);
        background-size: cover;
      }
      #result {
        font-size: 16px;
        color: #ffffff;
        line-height: 22px;
        height: 22px;
        display: inline-block;
        text-align: center;
        margin-bottom: 15px;
        width: 100%;
      }
    </style>
  </head>
  <script type="text/javascript">
    let answer_count = 0;
    let correct_count = 0;
    let cardNameNow = [];
    let isSuccessFlag = false;
    let tips = [];
    let tipFlag = 0;
    let tipStr = "";

    !(function (n) {
      var e = n.document,
        t = e.documentElement,
        i = 750,
        d = i / 100,
        o = "orientationchange" in n ? "orientationchange" : "resize",
        a = function () {
          var n = t.clientWidth || 375;
          n > 750 && (n = 750);
          t.style.fontSize = n / d / 4 + "px";
        };
      e.addEventListener &&
        (n.addEventListener(o, a, !1),
        e.addEventListener("DOMContentLoaded", a, !1));
    })(window);

    $(document).ready(function () {
      let userName = $.cookie("userName");
      let score = $.cookie("score");
      if (userName != null && userName != "") {
        $("#userCurrent").text(userName);
        $("#playerName").text(userName);
        if (score != null && score != "") {
          $("#score").text(score);
        }
      }
      refreshQuestion();
      updateScore(0); // 不更新积分 但刷新排名
      setZoom(); // 调整缩放比例

        //捕捉回车动作
        $(document).keyup(function (e) {//捕获文档对象的按键弹起事件
            // 回车 提交答案
            if (e.keyCode == 13) {
                if(!$("#submitBtn").prop("disabled")){
                    submitAnswer();
                }
            }
            // 右方向键 下一题
            else if (e.keyCode == 39) {
                if(!$("#submitBtn").prop("disabled")){
                    next();
                }
            }
           {# // H 获取提示
            else if (e.keyCode == 72) {
                if(!$("#submitBtn").prop("disabled")){
                    getTips();
                }
            }
            // 空格键 获取提示
            else if (e.keyCode == 32) {
                if(!$("#submitBtn").prop("disabled")){
                    showAnswer();
                }
            }#}
        });

        // 阻止打开调试窗
        document.onkeydown=function (e){
            if (e.key === "F12") {
                e.cancelBubble = true;
                e.returnValue = false;
                MessageBox.alert("F12已经禁用了哦");
            }
        }

       {# // 防止鼠标右键浏览器‘检查’操作
        setInterval(function () {
            debugger;
        }, 100)#}

        // 禁止右键
        document.oncontextmenu = function () { return false; };
    });

    /*
     * inputName 输入的名字
     * nameList 译名集合
     * return boolean
     */
    function cardNameReg(inputName, nameList) {
      // 卡牌名正则
      let reg = /[^\u4e00-\u9fa5A-z0-9]+/g;
      let nameMap = nameList.map((e) => e.replace(reg, ""));
      let inputMap = inputName.replace(reg, "");
      return nameMap.includes(inputMap);
    }

    function submitAnswer() {
      if ($("#submitBtn").attr("disabled")) {
        return
      }
      let cardNameInput = $("#cardNameInput").val().trim();
      if (cardNameInput == "") {
          MessageBox.alert("尚未输入卡牌名称！");
        return;
      }
      if (cardNameReg(cardNameInput, cardNameNow)) {
        isSuccessFlag = true;
        correct_count++;
        $("#submitBtn").attr("disabled", true); // 暂时禁用提交按钮
        updateScore(4 - tipFlag); // 答对最多4分,用一次提示少一分
        $("#result").text("恭喜你答对了，可进行下一题！");
        // $("#result").css("color", "green");
      } else {
        $("#result").text("很遗憾，你答错了！");
        // $("#result").css("color", "red");
      }
    }

    function next() {
      if (!isSuccessFlag) {
        if (tipFlag < 3) {
            MessageBox.alert("还有" + (3 - tipFlag) + "次提示未使用！");
          return;
        }
        updateScore(-1); // 答错扣1分
        // $("#result").css("color", "black");
        // $("#result").text("展示正确答案，即将进入下一题...");
      }
      answer_count++;
      $("#answered_count").text(answer_count + "题");
      let correct_rate = ((correct_count * 100) / answer_count).toFixed(2);
      $("#correct_rate").text(correct_rate);

      setTimeout(refreshQuestion, 3000);
      $("#submitBtn").attr("disabled", false);
      var obj = document.getElementById("nextBtn");
      time(obj, 3);
    }

    function getTips() {
      tipFlag++;
      $(".tips-box").css("display", "none");
      $("#tipInfo").css("display", "flex");
      if (tipFlag == 1) {
        tipStr += "【提示1】: " + tips[0] + "\n";
        // $("#tipInfo").text(tipStr);
        $("#tipInfo").append("<div class='tips-item tips-mar'><img src='../static/icon-tips.png' /> <span>【提示1】:</span> " + tips[0] + "</div>")
      } else if (tipFlag == 2) {
        // tipStr += "【提示2】: " + tips[1] + "\n";
        $("#tipInfo").append("<div class='tips-item tips-mar'><img src='../static/icon-tips.png' /> <span>【提示2】:</span> " + tips[1] + "</div>")
      } else if (tipFlag == 3) {
        // tipStr += "【提示3】: 已拓展截图区域";
        $("#cardPicPart_" + tips[2].y + "-" + tips[2].x).attr(
          "src",
          "data:image/png;base64," + tips[2].pic
        );
        $("#tipInfo").append("<div class='tips-item'><img src='../static/icon-tips.png' /> <span>【提示3】:</span> " + '已拓展截图区域' + "</div>")
      } else {
          MessageBox.alert("提示次数已用完！");
      }
    }

    function refreshQuestion() {
      $(".img-part").attr("src", "");

      $(".img-part").show();
      $("#cardPicComplete").hide();
      $("#result").text("");
      $("#cardNameInput").val("");
      $("#tipInfo").empty();
      $(".tips-box").css("display", "flex");
      $("#tipInfo").css("display", "none");
      isSuccessFlag = false;
      tipFlag = 0;
      tipStr = "";
      $.ajax({
        type: "get",
        url: "/get/data",
        contentType: "application/json",
        async: false,
        success: function (data, status) {
          if (data != null && data != "") {
            tips = [];
            cardNameNow = [];
            cardNameNow.push(data.data.card_name_ygopro);
            cardNameNow.push(data.data.card_name_cnoffical);
            cardNameNow.push(data.data.card_name_md);
            cardNameNow.push(data.data.card_name_nwbbs);
            cardNameNow.push(data.data.card_name_cnocg);
            tips.push(data.data.tip1);
            tips.push(data.data.tip2);
            tips.push({
              x: data.data.x_tip3,
              y: data.data.y_tip3,
              pic: data.data.tip3,
            });
            $("#cardPicPart_" + data.data.y + "-" + data.data.x).attr(
              "src",
              "data:image/png;base64," + data.data.cut_pic
            );
            $("#cardPicComplete").attr("src", data.data.origin_pic);
          }
        },
        error: function () {
            MessageBox.alert("调用异常，操作失败!");
        },
      });
    }

    // 查看答案
    function showAnswer() {
      if (!isSuccessFlag) {
        // 未提交过答案，建议先看提示
        if (!$("#submitBtn").prop("disabled")) {
          if (tipFlag < 3) {
              MessageBox.alert("还有" + (3 - tipFlag) + "次提示,不看看吗！");
            return;
          }
        }
      }
      $("#submitBtn").attr("disabled", true);
      $(".img-part").hide();
      $("#cardPicComplete").show();
      $("#cardNameInput").val(cardNameNow[3]);
    }

    // 更新分数
    function updateScore(inc) {
      $.ajax({
        type: "post",
        url: "/game/update/score",
        data: {
          inc: inc,
          user: $.cookie("userName")?.trim(),
        },
        dataType: "json",
        async: false,
        success: function (data, status) {
          if (data != null && data.list.length > 0) {
            $("#score").text(data.score);
            refreshRank(data.list);
          }
        },
        error: function () {
            MessageBox.alert("调用异常，操作失败!");
        },
      });
    }

    // 刷新排名
    function refreshRank(rankList) {
      $("#rankInfo").html("");
      let head =
        '<tr role="row" class="rank-th-row" style="width:100%;margin: 0;padding: 0">\n' +
        '                                <th class="col-xs-3" style="text-align: left;padding: 0; padding-left: 12px;">排名</th>\n' +
        '                                <th class="col-xs-3" style="text-align: left;padding: 0">玩家</th>\n' +
        '                                <th class="col-xs-3" style="text-align: left;padding: 0">积分</th>\n' +
        '                                <th class="col-xs-3" style="text-align: left;padding: 0">段位</th>\n' +
        // '                                <th class="col-xs-3" style="text-align: left;padding: 0">' +
        // '                                    <span style="text-decoration:underline;color: #0a6cd6;cursor: pointer"\n' +
        // '                                          title="积分规则：\n无提示答对积4分,每使用一次提示扣1分，提示用完跳过扣1分">' +
        // "                                        积分</span></th>\n" +
        // '                                <th class="col-xs-3" style="text-align: left;padding: 0;">\n' +
        // '                                    <span style="text-decoration:underline;color: #0a6cd6;cursor: pointer"\n' +
        // '                                          title=\"\<50:黑铁\n50-100:青铜\n100-300:白银\n300-800:黄金\n800-1500:钻石\n\>=1500:大师\n\">' +
        // "                                        段位</span></th>\n" +
        "                            </tr>";
      $("#rankInfo").append(head);
      for (let i = 0; i < rankList.length; i++) {
        let rankContent = "";
        const rankInfo = rankList[i];
        if (rankInfo != null) {
          let tier = "";
          if (rankInfo[1] < 20) {
            tier = "<span >黑铁</span>";
          } else if (rankInfo[1] < 100) {
            tier = "<span >青铜</span>";
          } else if (rankInfo[1] < 300) {
            tier = "<span >白银</span>";
          } else if (rankInfo[1] < 800) {
            tier = "<span >黄金</span>";
          } else if (rankInfo[1] < 1500) {
            tier = "<span >钻石</span>";
          } else {
            tier = "<span >大师</span>";
          }
          rankContent += "<tr class='rank-table-tr'>";
          if (i === 0) {
            rankContent += "<td class='rank-table-tr-td1'><div class='rank1'></div></td>";
          } else if (i === 1) {
            rankContent += "<td class='rank-table-tr-td1'><div class='rank2'></div></td>";
          } else if (i === 2) {
            rankContent += "<td class='rank-table-tr-td1'><div class='rank3'></div></td>";
          } else {
            rankContent += "<td class='rank-table-tr-td1'><div class='rank'>" + (i + 1) + "</div></td>";
          }
          rankContent += "<td><div>" + rankInfo[0] + "</div></td>";
          rankContent += "<td><div>" + rankInfo[1] + "</div></td>";
          rankContent += "<td><div>" + tier + "</div></td>";
          rankContent += "</tr>";
          $("#rankInfo").append(rankContent);
        }
      }
    }

    function time(obj, wait) {
      if (wait == 0) {
        obj.removeAttribute("disabled");
        obj.innerHTML = "下一题";
      } else {
        obj.setAttribute("disabled", true);
        obj.innerHTML = wait + " 秒";
        wait--;
        setTimeout(function () {
          time(obj, wait);
        }, 1000);
      }
    }

    function logout() {
      $.cookie("userName", "", { expires: -1 });
      $.cookie("score", "", { expires: -1 });
      location.href = "/";
    }
  </script>
  <body>
    <div class="bg">
      <div class="header header-right">
        <div class="header-nav">
          <div class="header-nav-box">
            <img class="header-icon" src="../static/icon-user.png" alt="" />
            <span id="userCurrent"></span>
          </div>
          <div class="header-nav-box">
            <img class="header-icon" src="../static/icon-loginOut.png" alt="" />
            <span onclick="logout()">排行榜</span>
          </div>
        </div>
        <div class="game_box_nav">
          <div class="game_box_nav_item">
            <div class="decorate"></div>
            <div class="label">已回答：</div>
            <div id="answered_count" class="value">0</div>
          </div>
          <div class="game_box_nav_item">
            <div class="decorate"></div>
            <div class="label">正确率：</div>
            <div id="correct_rate" class="value">0</div>
          </div>
          <div class="game_box_nav_item">
            <div class="decorate"></div>
            <div class="label">本次积分：</div>
            <div id="score" class="value">0</div>
          </div>
        </div>
        <div
          class="game_box_main"
          style="border: solid 1px #6b686887; background-color: #565656"
        >
          <div class="row img-box">
            {#<img
              alt=""
              id="cardPicPart"
              style="display: block; position: absolute; left: 40%; top: 35%"
              src=""
            />
            <img
              alt=""
              id="cardPicComplete"
              style="max-width: 100%; height: 100%; display: none"
              src=""
            />#}
            <img class="img-part" src="" id="cardPicPart_0-0" />
            <img class="img-part" src="" id="cardPicPart_0-1" />
            <img class="img-part" src="" id="cardPicPart_0-2" />
            <img class="img-part" src="" id="cardPicPart_1-0" />
            <img class="img-part" src="" id="cardPicPart_1-1" />
            <img class="img-part" src="" id="cardPicPart_1-2" />
            <img class="img-part" src="" id="cardPicPart_2-0" />
            <img class="img-part" src="" id="cardPicPart_2-1" />
            <img class="img-part" src="" id="cardPicPart_2-2" />
            <img
              alt=""
              id="cardPicComplete"
              style="max-width: 100%; height: 100%; display: none"
              src=""
            />
          </div>
        </div>
        <div class="game_box_operation">
          <div class="input-answer-box">
            <input type="text" id="cardNameInput" placeholder="填写完整卡名" />
            <div class="font-20" id="submitBtn" onclick="submitAnswer()">
              提交
            </div>
          </div>
          <span id="result" class="font-20"></span>

          <div class="tips-operation">
            <div
              class="tips-operation-btn get_tips"
              style="margin-right: 12%"
              onclick="getTips()"
            ></div>
            <div
              class="tips-operation-btn show_answer"
              id="showAnswerBtn"
              onclick="showAnswer()"
            ></div>
          </div>
          <div class="tips-box">
            <div class="tips-text"></div>
          </div>
          <div id="tipInfo" readonly></div>
          <div id="nextBtn" onclick="next()">
            <span class="nextBtn-text">下一题</span>
            <span>>></span>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
